<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>tiptap CodeBlockLowlight 代码高亮 - itxst.com</title>
    <meta name="keywords" content="tiptap CodeBlockLowlight 代码高亮" />
    <meta name="description" content="使用 CodeBlockLowlight 代码高亮扩展，你可以在文档中显示源代码而不被浏览器解析，代码包裹在HTML标记的 pre 和code 标签中，并且可以让代码高亮。" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta http-equiv="Content-Language" content="zh-CN">
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
    <link href="/css/zt.css?ver=1.6.6" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" language="javascript" src="/js/jquery.js?ver=1.6.6"></script>
    <script type="text/javascript" src="/js/highlight/highlight.min.js?ver=1.6.6"></script>
    <link rel="stylesheet" type="text/css" href="/js/highlight/styles/vs2015x.css?ver=1.6.6">
    <script type="text/javascript" language="javascript" src="/js/comm.js?ver=1.6.6"></script>
    <script type="text/javascript" language="javascript" src="/js/zt.js?ver=1.6.6"></script>
    <script type="text/javascript" charset="utf-8" src="/js/layer/layer.js?ver=1.6.6"></script>
    <link rel="alternate" media="only screen and(max-width: 640px)" href="http://m.itxst.com/tiptap/ibyqqqzj.html" >
    <!--[if lte IE 9]>
    <script src="/js/respond/respond.js?ver=1.6.6"></script>
    <![endif]-->
</head>
<body>
    <div class="body"  >
        <div class="header">
            <div class="naver">
                <div class="logo">
                    <a href="/"><img src="/img/logov31.png" /></a>
                </div>
                <div class="naver-left">
                 <a href="/tiptap/tutorial.html">tiptap 中文文档</a>
                </div>
                <div class="naver-search">
                    <div class="naver-search-txt">
                        <input type="text" id="keyword" placeholder="Please enter the keyword" data-topic="tiptap">
                    </div>
                    <div class="naver-search-btn"><a href="javascript:void(0)" onclick="Search()">Search</a></div>
                </div>
                 <div class="naver-right"> 
                        <a href="/ag-grid/tutorial.html">AG-GRID</a> 
                        <a href="/tiptap/tutorial.html">Tiptap</a> 
                        <a href="/css-flex/tutorial.html">CSS-FLEX</a> 
                        <a href="/Bootstrap-Table/QuickStart.html">Bootstrap-Table</a> 
                </div>
            </div>
            <div class="path">
                
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="pagew">
        <div class="page" >
            <div class="page-body">
                <div class="content-detail">
                    <h1>tiptap CodeBlockLowlight 代码高亮</h1>
               
               <p class="p">使用 <b>CodeBlockLowlight</b> &nbsp;代码高亮扩展，你可以在文档中显示源代码而不被浏览器解析，代码包裹在HTML标记的 <b>pre</b> 和 <b>code</b> 标签中，并且可以让<b>代码高亮</b>。</p><h2>Install 安装</h2><pre class="brush:js;toolbar:false"><code class="language-javascript">npm install lowlight @tiptap/extension-code-block-lowlight</code></pre><h2>Settings 配置</h2><p class="pe"><b>lowlight</b>&nbsp;导入lowlight插件给扩展。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">import { lowlight } from 'lowlight/lib/core'

CodeBlockLowlight.configure({
  lowlight,
})</code></pre><p class="pe"><b>languageClassPrefix</b>&nbsp;代码样式class的前缀。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">CodeBlockLowlight.configure({
  languageClassPrefix: 'language-',
})</code></pre><p class="pe"><b>defaultLanguage</b> 设置默认语言比如javascript、html。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">CodeBlockLowlight.configure({
  defaultLanguage: 'plaintext',
})</code></pre><p class="pe"><b>HTMLAttributes</b> 自定义标签对应的HTML属性。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">CodeBlockLowlight.configure({
  HTMLAttributes: {
    class: 'my-custom-class',
  },
})</code></pre><h2>Commands 命令</h2><p class="pe"><b>setCodeBlock</b> 将选中内容转换为代码块。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">editor.commands.setCodeBlock()</code></pre><p class="pe"><b>toggleCodeBlock</b> 将选中内容切换为代码块或取消代码块。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">editor.commands.toggleCodeBlock()</code></pre><h2>Shortcuts 快捷键</h2><p class="pe"><b>Windows/Linux</b> Control Alt C<br/><b>macOS</b> Cmd Alt C</p><h2>源代码</h2><p><a href="https://github.com/ueberdosis/tiptap/blob/main/packages/extension-code-block-lowlight/" target="_blank" textvalue="CodeBlock 源代码">CodeBlockLowlight 源代码</a></p><h2>在线例子</h2><p><a href="https://debug.itxst.com/static/tiptapdemo/index.html#codeblocklowlight" target="_blank" textvalue="vue 在线例子">vue 在线例子</a></p><h2>CodeBlockLowlight 例子</h2><div class="mcode"><ul class=" list-paddingleft-2"><li><p class="mcode-curr">Vue 例子</p></li><li><p class="">React 例子</p></li></ul><pre class="brush:html;toolbar:false"><code class="language-html">&lt;template&gt;
  &lt;div v-if="editor"&gt;
    &lt;button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }"&gt;
      toggleCodeBlock
    &lt;/button&gt;
    &lt;button @click="editor.chain().focus().setCodeBlock().run()" :disabled="editor.isActive('codeBlock')"&gt;
      setCodeBlock
    &lt;/button&gt;
    &lt;editor-content :editor="editor" /&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import { Editor, EditorContent } from '@tiptap/vue-3'
import css from 'highlight.js/lib/languages/css'
import js from 'highlight.js/lib/languages/javascript'
import ts from 'highlight.js/lib/languages/typescript'
import html from 'highlight.js/lib/languages/xml'
// load all highlight.js languages
import { lowlight } from 'lowlight'

lowlight.registerLanguage('html', html)
lowlight.registerLanguage('css', css)
lowlight.registerLanguage('js', js)
lowlight.registerLanguage('ts', ts)

export default {
  components: {
    EditorContent,
  },
  data() {
    return {
      editor: null,
    }
  },
  mounted() {
    this.editor = new Editor({
      extensions: [
        Document,
        Paragraph,
        Text,
        CodeBlockLowlight.configure({
          lowlight,
        }),
      ],
      content: `
        &lt;p&gt;
          That’s a boring paragraph followed by a fenced code block:
        &lt;/p&gt;
        &lt;pre&gt;&lt;code&gt;for (var i=1; i &lt;= 20; i++)
{
  if (i % 15 == 0)
    console.log("FizzBuzz");
  else if (i % 3 == 0)
    console.log("Fizz");
  else if (i % 5 == 0)
    console.log("Buzz");
  else
    console.log(i);
}&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;
          Press Command/Ctrl + Enter to leave the fenced code block and continue typing in boring paragraphs.
        &lt;/p&gt;
      `,
    })
  },

  beforeUnmount() {
    this.editor.destroy()
  },
}
&lt;/script&gt;
&lt;style&gt;
/* Basic editor styles */
.ProseMirror {
  &gt; * + * {
    margin-top: 0.75em;
  }
  pre {
    background: #0D0D0D;
    color: #FFF;
    font-family: 'JetBrainsMono', monospace;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    code {
      color: inherit;
      padding: 0;
      background: none;
      font-size: 0.8rem;
    }
    .hljs-comment,
    .hljs-quote {
      color: #616161;
    }
    .hljs-variable,
    .hljs-template-variable,
    .hljs-attribute,
    .hljs-tag,
    .hljs-name,
    .hljs-regexp,
    .hljs-link,
    .hljs-name,
    .hljs-selector-id,
    .hljs-selector-class {
      color: #F98181;
    }
    .hljs-number,
    .hljs-meta,
    .hljs-built_in,
    .hljs-builtin-name,
    .hljs-literal,
    .hljs-type,
    .hljs-params {
      color: #FBBC88;
    }
    .hljs-string,
    .hljs-symbol,
    .hljs-bullet {
      color: #B9F18D;
    }
    .hljs-title,
    .hljs-section {
      color: #FAF594;
    }
    .hljs-keyword,
    .hljs-selector-tag {
      color: #70CFF8;
    }
    .hljs-emphasis {
      font-style: italic;
    }
    .hljs-strong {
      font-weight: 700;
    }
  }
}
&lt;/style&gt;</code></pre><pre class="brush:js;toolbar:false"><code class="language-javascript">// load specific languages only
// import { lowlight } from 'lowlight/lib/core'
// import javascript from 'highlight.js/lib/languages/javascript'
// lowlight.registerLanguage('javascript', javascript)
import './styles.scss'

import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import { EditorContent, useEditor } from '@tiptap/react'
import css from 'highlight.js/lib/languages/css'
import js from 'highlight.js/lib/languages/javascript'
import ts from 'highlight.js/lib/languages/typescript'
import html from 'highlight.js/lib/languages/xml'
// load all highlight.js languages
import { lowlight } from 'lowlight'
import React from 'react'

lowlight.registerLanguage('html', html)
lowlight.registerLanguage('css', css)
lowlight.registerLanguage('js', js)
lowlight.registerLanguage('ts', ts)

export default () =&gt; {
  const editor = useEditor({
    extensions: [
      Document,
      Paragraph,
      Text,
      CodeBlockLowlight.configure({
        lowlight,
      }),
    ],
    content: `
        &lt;p&gt;
          That’s a boring paragraph followed by a fenced code block:
        &lt;/p&gt;
        &lt;pre&gt;&lt;code class="language-javascript"&gt;for (var i=1; i &lt;= 20; i++)
{
  if (i % 15 == 0)
    console.log("FizzBuzz");
  else if (i % 3 == 0)
    console.log("Fizz");
  else if (i % 5 == 0)
    console.log("Buzz");
  else
    console.log(i);
}&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;
          Press Command/Ctrl + Enter to leave the fenced code block and continue typing in boring paragraphs.
        &lt;/p&gt;
      `,
  })

  if (!editor) {
    return null
  }

  return (
    &lt;&gt;
      &lt;button
        onClick={() =&gt; editor.chain().focus().toggleCodeBlock().run()}
        className={editor.isActive('codeBlock') ? 'is-active' : ''}
      &gt;
        toggleCodeBlock
      &lt;/button&gt;
      &lt;button
        onClick={() =&gt; editor.chain().focus().setCodeBlock().run()}
        disabled={editor.isActive('codeBlock')}
      &gt;
        setCodeBlock
      &lt;/button&gt;


      &lt;EditorContent editor={editor} /&gt;
    &lt;/&gt;
  )
}

/* Basic editor styles */
/*
.ProseMirror {
  &gt; * + * {
    margin-top: 0.75em;
  }

  pre {
    background: #0d0d0d;
    border-radius: 0.5rem;
    color: #fff;
    font-family: "JetBrainsMono", monospace;
    padding: 0.75rem 1rem;

    code {
      background: none;
      color: inherit;
      font-size: 0.8rem;
      padding: 0;
    }

    .hljs-comment,
    .hljs-quote {
      color: #616161;
    }

    .hljs-variable,
    .hljs-template-variable,
    .hljs-attribute,
    .hljs-tag,
    .hljs-name,
    .hljs-regexp,
    .hljs-link,
    .hljs-name,
    .hljs-selector-id,
    .hljs-selector-class {
      color: #f98181;
    }


    .hljs-number,
    .hljs-meta,
    .hljs-built_in,
    .hljs-builtin-name,
    .hljs-literal,
    .hljs-type,
    .hljs-params {
      color: #fbbc88;
    }

    .hljs-string,
    .hljs-symbol,
    .hljs-bullet {
      color: #b9f18d;
    }

    .hljs-title,
    .hljs-section {
      color: #faf594;
    }

    .hljs-keyword,
    .hljs-selector-tag {
      color: #70cff8;
    }

    .hljs-emphasis {
      font-style: italic;
    }

    .hljs-strong {
      font-weight: 700;
    }
  }
}
*/</code></pre></div>
 
               <h2>
    下载教程 Demo
</h2>
<p class="pe">
   本教程<b>Demo</b>的源码点击这里下载，<a href="https://img1.itxst.com/8/c/8c32fcdc12cb8847c62e405be8a73835.zip" target="_blank" textvalue="Tiptap Demo">Tiptap Demo</a>，下载完成后运行<b>npm i</b>初始化依赖包。
</p>
                </div>
                <div class="content-r">   <a href="/tiptap/tutorial.html" target="_self">
                     <img src="https://img1.itxst.com/0/9/09355b3592a0c16799b504a9f2a70303.png" alt="tiptap 中文文档" />
                    </a>                                                <a href="//www.itxst.com/vue-draggable/tutorial.html" target="_blank">
                                <img src="//img1.itxst.com/b/f/bf9af8368dfac84cd703ef54e1e89d14.png" alt="vue.draggable" />
                            </a>
 
                </div>
            </div>
            <div class="home-menu scroll">
                <div class="tree">
      <a data-level="1" class="leve-1   doc-1   " href="/tiptap/tutorial.html" title="tiptap 中文文档">快速入门</a>
      <a data-level="1" class="leve-1    arrow-1" href="/tiptap/configuration.html" title="Guide 向导">Guide 向导</a>
      <a data-level="1" class="leve-1    arrow-2" href="/tiptap/api.html" title="tiptap api 列表">API 列表</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/methods.html" title="tiptap editor 方法">tiptap 方法</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/attrs.html" title="tiptap 属性">tiptap 属性</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/settings.html" title="titap 配置">titap 配置</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/uaqmeemr.html" title="tiptap commands 命令">commands 命令</a>
      <a data-level="2" class="leve-2    arrow-2" href="/tiptap/363qzvqv.html" title="nodes 节点">nodes 节点</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/blockquote.html" title="tiptap Blockquote 引用扩展">Blockquote 引用扩展</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/avmrbq6f.html" title="tiptap BulletList 无序序列扩展">BulletList 无序序列扩展</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/mrmuzbin.html" title="tiptap CodeBlock 代码块扩展">CodeBlock 代码块扩展</a>
      <a data-level="3" class="leve-3   doc-1    doc-2 " href="/tiptap/ibyqqqzj.html" title="tiptap CodeBlockLowlight 代码高亮">CodeBlockLowlight 代码高亮</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/effvybzr.html" title="tiptap Document 节点">Document 节点</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/qnv3uzam.html" title="tiptap HardBreak 换行节点">HardBreak 换行节点</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/yvymznqu.html" title="tiptap Heading 标题节点">Heading 标题节点</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/eqbzrb7r.html" title="tiptap HorizontalRule 横线节点">HorizontalRule 横线节点</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/z77rauyz.html" title="tiptap Image 图片扩展">Image 图片扩展</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/bqjemyb3.html" title="tiptap ListItem 节点">ListItem 节点</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/nnzya3qj.html" title="tiptap Mention 提及节点">Mention 提及节点</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/3uqmeazz.html" title="tiptap OrderedList 有序列节点">OrderedList 有序列节点</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/iyryuqn6.html" title="tiptap Paragraph 段落节点">Paragraph 段落节点</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/mv67fbzr.html" title="tiptap Table 表格扩展">Table 表格扩展</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/bfmjvvbz.html" title="tiptap TaskList 任务列表扩展">TaskList 任务列表</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/zqi7fvzf.html" title="tiptap TaskItem 任务列表项扩展">TaskItem 任务列表项</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/ffffui3e.html" title="tiptap Text 节点">Text 节点</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/marks.html" title="tiptap marks 标记">marks 标记</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/extensions.html" title="tiptap extensions 扩展">extensions 扩展</a>
                 </div>
                 <div  class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>
           <div class="footer">
© 2023 itxst.com All rights reserved.
</div>

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?7e15ed96eb8133218e99de8bc1f5cb61";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
       </div>
    </div> 
</body>
</html>
